<template>
  <div>
    <div style="display: flex;flex-wrap:wrap;margin-top:20px;float:right;margin-right:20px;">
      <el-button type="primary" icon="el-icon-plus" @click="dialogadd = true">添加资料</el-button>
      <el-button type="danger" icon="el-icon-delete">删除资料</el-button>
      <el-button type="primary" icon="el-icon-upload">导入资料</el-button>
      <el-button type="success" icon="el-icon-download">导出资料</el-button>
    </div>
    <el-dialog title="添加资料" :visible.sync="dialogadd" width="58%">
      <el-container style="height: 500px; border: 1px solid #eee">
        <el-main>
          <el-form ref="form" :model="formadd" label-width="90px">
            <el-form-item label="作文题目" >
              <el-input v-model="formadd.title" autocomplete="off" clearable></el-input>
              <el-link type="info" disabled>若不填写则默认为自拟题目</el-link>
            </el-form-item>
            <el-form-item label="要求" >
              <el-input v-model="formadd.requirement" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提示" >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formadd.tips">
              </el-input>
            </el-form-item>
            <el-form-item label="关键词" >
              <el-input v-model="formadd.keyword" autocomplete="off"></el-input>
              <el-link type="info" disabled>多个关键词用;隔开</el-link>
            </el-form-item>
            <el-form-item label="体裁" >
              <el-select v-model="formadd.theme" placeholder="请选择体裁">
                <el-option label="议论文" value="议论文"></el-option>
                <el-option label="说明文" value="说明文"></el-option>
                <el-option label="应用文" value="应用文"></el-option>
                <el-option label="议论文" value="议论文"></el-option>
              </el-select>
            </el-form-item>
            <el-form :inline="true" ref="form" :model="formadd" label-width="90px">
              <el-form-item label="学生水平" >
                <el-select v-model="formadd.studentlevel" placeholder="请选择学生水平">
                  <el-option label="初级" value="初级"></el-option>
                  <el-option label="中级" value="中级"></el-option>
                  <el-option label="高级" value="高级"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学习者水平" >
                <el-select v-model="formadd.learnerlevel" placeholder="请选择学习者水平">
                  <el-option label="初级" value="初级"></el-option>
                  <el-option label="中级" value="中级"></el-option>
                  <el-option label="高级" value="高级"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" label-width="90px">
              <el-form-item label="一级主题" >
                <el-select v-model="formadd.primarytheme" placeholder="请选择一级主题">
                  <el-option label="初级" value="shanghai"></el-option>
                  <el-option label="中级" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="二级主题" >
                <el-select v-model="formadd.secondarytheme" placeholder="请选择二级主题">
                  <el-option label="初级" value="shanghai"></el-option>
                  <el-option label="说明文" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="三级主题" >
                <el-select v-model="formadd.threeleveltheme" placeholder="请选择三级主题">
                  <el-option label="初级" value="shanghai"></el-option>
                  <el-option label="说明文" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" ref="form" :model="formadd" label-width="90px">
              <el-form-item label="写作限时" >
                <el-input v-model="formadd.time" placeholder="单位为分钟" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="字数要求" >
                <el-input v-model.number="formadd.wordnum" placeholder="**字以上" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogadd = false">取 消</el-button>
        <el-button type="warning" plain @click="resetForm(formadd) ">重 置</el-button>
        <el-button type="primary" @click="submitadd(formadd)">添 加</el-button>
      </div>
    </el-dialog>
    <div style="margin-top:20px;margin-right:20px;margin-left:20px;">
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        max-height="700"
        border
        style="width: 100% ;top: 25px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          label="题目"
          width="220">
        </el-table-column>
        <el-table-column
          prop="tips"
          label="提示"
          width="220">
        </el-table-column>
        <el-table-column
          prop="requirement"
          label="要求"
          width="220">
        </el-table-column>
        <el-table-column
          prop="keys"
          label="关键词"
          width="150">
        </el-table-column>
        <el-table-column
          prop="theme"
          label="体裁"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentlevel"
          label="学生水平"
          width="150">
        </el-table-column>
        <el-table-column
          prop="learnerlevel"
          label="学习者水平"
          width="150">
        </el-table-column>
        <el-table-column
          prop="primarytheme"
          label="一级主题"
          width="150">
        </el-table-column>
        <el-table-column
          prop="secondarytheme"
          label="二级主题"
          width="150">
        </el-table-column>
        <el-table-column
          prop="threeleveltheme"
          label="三级主题"
          width="150">
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          width="100">
        </el-table-column>
        <el-table-column
          prop="wordnum"
          label="字数"
          width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-link @click="getrow(scope.row), dialogdelete = true" type="danger" size="small" >删除</el-link>
            <el-link type="primary" size="small">发布</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogdelete"
        width="30%">
        <span>确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogdelete = false">取 消</el-button>
              <el-button type="danger" @click="dialogdelete = false , handleDelete(row)">删 除</el-button>
        </span>
      </el-dialog>
      <div style="text-align: center;margin-top: 30px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="num"
          :page-size="pageSize"
          :page-count="10"
          @current-change="current_change">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { BaaS } from '@/api/user'
var baas = BaaS()

export default {
  data() {
    return {
      num: null, //数据条数,
      row: null,
      pageSize: 10,
      currentPage: 1,
      dialogadd: false,
      dialogdelete: false,
      formadd: {
        title: '', //作文题目
        requirement: '', //要求
        keys: '', //关键词
        tips: '', //提示
        theme: '', //体裁
        studentlevel: '', //学生水平
        learnerlevel: '', //学习者水平
        primarytheme: '', //一级主题
        secondarytheme: '', //二级主题
        threeleveltheme: '', //三级主题
        time: '', //写作限时
        wordnum: '' //字数要求
      },
      tableData: null,
      tablejson: null
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    getrow(row) {
      this.row = row.id
      console.log(row.id)
    },
    current_change(currentPage) {
      this.currentPage = currentPage
    },
    resetForm(formName) {     //重置表单
      for (let key in formName) {
        formName[key] = ''
      }
    },
    reload() {
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenku')
      Product.count().then(num => {
        this.num = num
      })
      Product.limit(1000).find().then(res => {
        // success
        // console.log(res.data.objects)
        this.tablejson = res.data.objects
        var zuowenku = []
        for (var i = 0; i < res.data.objects.length; i++) {
          // var dict ={}
          // dict.set{'value',res.data().objects[i].class_name}
          zuowenku.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
            'id': i + 1,
            'title': res.data.objects[i].title,
            'tips': res.data.objects[i].tips,
            'requirement': res.data.objects[i].requirement,
            'keys': res.data.objects[i].keys,
            'learnerlevel': res.data.objects[i].learnerlevel,
            'studentlevel': res.data.objects[i].studentlevel,
            'theme': res.data.objects[i].theme,
            'primarytheme': res.data.objects[i].primarytheme,
            'secondarytheme': res.data.objects[i].secondarytheme,
            'threeleveltheme': res.data.objects[i].threeleveltheme,
            'time': res.data.objects[i].time,
            'wordnum': res.data.objects[i].wordnum
          })
          this.tableData = zuowenku
        }
      }, err => {
        // err
      })
    },
    submitadd(formName) {
      console.log(formName)
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenku')
      var product = Product.create()
      product.set('title', formName.title)
      product.set(formName).save().then(res => {
        // success
        console.log(res)
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        this.dialogadd = false
        this.reload()
      }, err => {
        //err 为 HError 对象
        console.log(err)
        this.$message({
          showClose: true,
          message: '添加失败',
          type: 'error'
        })
      })
    },
    handleDelete(row) {
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      console.log(this.tablejson[row - 1]._id)
      var id = this.tablejson[row - 1]._id
      var Product = new BaaS.TableObject('zuowenku')
      Product.delete(id).then(res => {
        // success
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
        this.reload()
      }, err => {
        // err
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'success'
        })
      })
    }
    //   query.compare('stu_id', '=', this.stujson[row]._id)
    //   var Product = new BaaS.TableObject('zuowenban')
    //   Product.setQuery(query).find().then(res => {
    //     console.log(res.data.objects)
    //     var mm = new BaaS.TableObject('zuowenban')
    //     var product = mm.getWithoutData(res.data.objects[0]._id)
    //     product.set({
    //       'class_name': null,
    //       'class_id': null
    //     })
    //     product.update().then(res => {
    //       // success
    //       this.Update(this.value)
    //       this.$message({
    //         message: '移除成功',
    //         type: 'success'
    //       })
    //     })
    //   })
    // }
  },
  computed: {
    ...mapGetters([
      'currentUser'
    ])
  },
  created: function() {
    var BaaS = require('minapp-sdk')
    BaaS.init(baas)
    var Product = new BaaS.TableObject('zuowenku')
    Product.count().then(num => {
      this.num = num
    })
    Product.limit(1000).find().then(res => {
      // success
      // console.log(res.data.objects)
      this.tablejson = res.data.objects
      var zuowenku = []
      for (var i = 0; i < res.data.objects.length; i++) {
        // var dict ={}
        // dict.set{'value',res.data().objects[i].class_name}
        zuowenku.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
          'id': i + 1,
          'title': res.data.objects[i].title,
          'tips': res.data.objects[i].tips,
          'requirement': res.data.objects[i].requirement,
          'keys': res.data.objects[i].keys,
          'learnerlevel': res.data.objects[i].learnerlevel,
          'studentlevel': res.data.objects[i].studentlevel,
          'theme': res.data.objects[i].theme,
          'primarytheme': res.data.objects[i].primarytheme,
          'secondarytheme': res.data.objects[i].secondarytheme,
          'threeleveltheme': res.data.objects[i].threeleveltheme,
          'time': res.data.objects[i].time,
          'wordnum': res.data.objects[i].wordnum
        })
        this.tableData = zuowenku
      }
    }, err => {
      // err
    })

    // Product.count().then(num => {
    //   this.num = num
    //   var n = num / 10
    //   for (var i = 0; i <= n; i++) {
    //     Product.limit(10).offset(i * 10).find().then(res => {
    //       // success
    //       console.log(res.data.objects)
    //     }, err => {
    //       // err
    //     })
    //   }
    // })
  }
}
</script>
